<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <title>Document</title>
    <link rel="stylesheet" href="bili.css">
    <style>
        .baimg {
            position: relative;
            width: 100%;
            height: 190px;
            background: url(/pink/imgs/bg1.png) no-repeat;
            animation: bearimg 30s linear forwards;
        }

        .baimg::after {
            content: '';
            display: block;
            width: 200px;
            height: 100px;
            position: absolute;
            bottom: 0;
            background: url(/pink/imgs/bear.png) no-repeat;
            animation: bear 1s steps(7) infinite, dynamic 3s linear forwards;
        }

        @keyframes bearimg {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -2304px 0;
            }
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1400px 0;
            }
        }

        @keyframes dynamic {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                transform: translate(-50%, 0);
            }
        }

        .baimg:hover {
            animation-play-state: paused;

        }

        .baimg:hover::after {
            animation-play-state: paused;
        }
        
    </style>
</head>

<body>
    <div class="baimg">
        <!-- 顶部 -->
        <div class="nav-one">
            <div class="logo"><a href="bili.html"><img src="/pink/imgs/bli.png" alt=""></a></div>
            <!-- 前面导航条 -->
            <ul class="ul-nav-ulone">
                <li>
                    <a href="">
                        <i class="ico-one-shoye"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li><a href="">番剧</a></li>
                <li><a href="">直播</a></li>
                <li><a href="">游戏中心</a></li>
                <li><a href="">漫画</a></li>
                <li><a href="">壁纸</a></li>
                <li><a href="">电影</a></li>
                <li>
                    <a href="">
                        <i class="ico-one-xzzx"></i>
                        <span>下载中心</span>
                    </a>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="nav-search">
                <input type="text">
                <div></div>
            </div>
            <!-- 后面导航条 -->
            <ul class="ul-nav-ultwo">
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i></i>
                        <span>首页</span>
                    </a>
                </li>
                <li class="li-last-child">
                    <a href="">
                        <i class="i-xz"></i>
                        <span>下载</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 旋转木马 -->
    <div class="carousel">
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </div>
    <!-- <iframe src="//player.bilibili.com/player.html?aid=904156507&bvid=BV1xP4y1i74F&cid=936166814&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->
    <!-- <iframe src="//player.bilibili.com/player.html?aid=988463715&bvid=BV1C44y1S7qr&cid=914936988&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->
</body>

</html>